<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="icon"
          th:href="@{/static/picture.ico}"
          type="image/x-icon"/>
    <link th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/font-awesome/css/font-awesome.css}" rel="stylesheet"/>
    <script th:src="@{/static/util/js/jquery-2.1.0.js}"></script>
    <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/layer/layer.js}"></script>
    <style>
        .hide {
            display: none;
        }

        .divT {
            display: block;
            position: fixed;
            bottom: 90px;
            right: 10px;
            width: 40px;
            height: 40px;
            background: #9d9d9d;
            line-height: 40px;
            float: right;
            text-align: center
        }

        .openPanel:hover .myPanel {
            box-shadow: 5px 5px 5px #888888;
            display: block;

        }

        .openPanel .myPanel {
            display: none;
            height: 380px;
            position: absolute;
            top: 51px;
            width: 300px;
            background: #222;
            right: -20px;
            padding: 30px;

        }

        .myPanel .row .col-sm-6 {
            cursor: pointer;
            background: #2b542c;
            margin-top: 10px;
        }

        .myPanel .row .col-sm-6:hover {
            background: #1b6d85;
        }

        .mytip {

            font-size: 10px;

        }

        a {
            color: #222222;
        }

        .tuichu {
            display: inline-block;
            width: 90px;
            height: 40px;
            line-height: 40px;
            background: #2b542c;
            text-align: center;
            cursor: pointer;
            color: #ffffff
        }

    </style>
</head>
<body style="background: #F3F5F7">
<header class="header">
    <div class="navbar navbar-inverse " style="border-radius: 0;z-index: 100000">
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                    <div class="navbar-header ">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target=".navbar-collapse">
                            <span class="sr-only">切换导航</span> <span class="icon-bar"></span>
                            <span class="icon-bar"></span> <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand  hidden-xs hidden-sm" th:href="@{/qxgl/}">OAEC学习平台</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">

                            <li><a th:href="@{/}">返回首页</a></li>


                            <shiro:hasPermission name="课程相关查询">
                                <li class="dropdown"><a href="javascript:" class="dropdown-toggle"
                                                        data-toggle="dropdown">课程管理<span class="caret"></span></a>
                                    <ul class="dropdown-menu">

                                        <shiro:hasPermission name="课程查询">
                                            <li><a th:href="@{/course/list}"
                                            ><i class="fa fa-edit" style="margin-right:10px"></i>课程编辑</a></li>
                                        </shiro:hasPermission>

                                        <shiro:hasPermission name="课程创索引">
                                            <li role="separator" class="divider"></li>
                                            <li><a href="javascript:" onclick="courseAddIndex()"
                                            ><i class="fa fa-indent" style="margin-right:10px"></i>课程创索引</a></li>
                                        </shiro:hasPermission>
                                        <shiro:hasPermission name="课程清索引">
                                            <li><a href="javascript:" onclick="courseDeleteIndex()"
                                            ><i class="fa fa-outdent" style="margin-right:10px"></i>课程删索引</a></li>
                                        </shiro:hasPermission>



                                        <shiro:hasPermission name="课程类型查询">
                                            <li role="separator" class="divider"></li>

                                            <li><a th:href="@{/courseType/list}"
                                            ><i class="fa fa-map-signs" style="margin-right:10px"></i>课程类型</a></li>
                                        </shiro:hasPermission>


                                    </ul>
                                </li>
                            </shiro:hasPermission>

                            <shiro:hasPermission name="笔记相关查询">
                                <li class="dropdown"><a href="javascript:" class="dropdown-toggle"
                                                        data-toggle="dropdown">笔记管理<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <shiro:hasPermission name="我的笔记查询">
                                            <li><a th:href="@{/noteBook/my}"
                                            ><i class="fa fa-sticky-note-o" style="margin-right:10px"></i>我的笔记</a></li>
                                        </shiro:hasPermission>

                                        <shiro:hasPermission name="全部笔记查询">
                                            <li role="separator" class="divider"></li>
                                            <li><a th:href="@{/noteBook/all}"
                                            ><i class="fa fa-book" style="margin-right:10px"></i>全部笔记</a></li>
                                        </shiro:hasPermission>

                                        <shiro:hasPermission name="笔记创索引">
                                            <li role="separator" class="divider"></li>
                                            <li><a href="javascript:" onclick="noteBookAddIndex()"
                                            ><i class="fa fa-indent" style="margin-right:10px"></i>笔记创索引</a></li>
                                        </shiro:hasPermission>
                                        <shiro:hasPermission name="笔记清索引">
                                            <li><a href="javascript:" onclick="noteBookDeleteIndex()"
                                            ><i class="fa fa-outdent" style="margin-right:10px"></i>笔记清索引</a></li>
                                        </shiro:hasPermission>


                                    </ul>
                                </li>
                            </shiro:hasPermission>

                            <shiro:hasPermission name="评论相关查询">
                                <li><a th:href="@{/courseReview/}"
                                ><i class="fa fa-commenting-o" style="margin-right:4px"></i>留言管理</a></li>
                            </shiro:hasPermission>

                            <li class="dropdown"><a href="javascript:"
                                                    class="dropdown-toggle" data-toggle="dropdown">休闲娱乐<span
                                    class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:" onclick="openFeiji();"><i
                                            class="fa fa-plane" style="margin-right: 10px"></i>飞机大战</a></li>
                                    <li><a href="javascript:" onclick="openEluosifk();"><i
                                            class="fa fa-th-large" style="margin-right: 10px"></i>俄罗斯方块</a></li>
                                    <li><a href="javascript:" onclick="openTaiqiu();"><i
                                            class="fa fa-circle " style="margin-right: 10px"></i>台球</a></li>
                                    <li><a href="javascript:" onclick="openWuziqi();"><i
                                            class="fa fa-hand-scissors-o " style="margin-right: 10px"></i>五子棋</a></li>
                                </ul>
                            </li>


                            <li><a onclick="zxtx()" href="javascript:">
                                <i class="fa  fa-comments-o" style="margin-right:4px"></i>在线通信
                            </a></li>


                        </ul>

                    </div>
                </div>
                <div class="col-sm-3 hidden-xs hidden-sm ">
					<span class="pull-right openPanel" style="color: white; line-height: 50px;">

						<div class="myPanel">
							<div class="row">
								<div class="col-sm-5" th:if="${session.loginUser!=null}">
									<img th:src='${session.loginUser.img}' onclick="allMyInfo()" class="img-circle"
                                         height="80"/>
								</div>
								<div class="col-sm-7" style="line-height: 40px">
                                    <div style="height: 40px"><shiro:principal property="nickname"/></div>
                                    <div style="height: 40px"><shiro:principal property="createTime"/></div>
                                </div>
							</div>
                            <hr/>
                                    <div class="row">
                                            <div class="col-sm-6" onclick="chooseImg()">
                                                <i class="fa fa-user-circle-o" style="margin-right:10px"></i>
                                                选择头像
                                            </div>
                                            <div class="col-sm-6" onclick="resetPwd()">
                                                <i class="fa fa-key " style="margin-right:10px"></i>
                                                修改密码
                                            </div>
                                            <div class="col-sm-6" onclick="resetNickName()">
                                                <i class="fa fa-address-card-o" style="margin-right:10px"></i>
                                                修改昵称
                                            </div>
                                            <div class="col-sm-6" onclick="allMyInfo()">
                                                <i class="fa fa-navicon" style="margin-right:10px"></i>
                                                我的信息
                                            </div>
                                    </div>

                            <hr/>
                            <a th:href="@{/logout}">
                                <span class="tuichu">

							   <i class="fa fa-mail-reply-all"></i> 安全退出
                                </span>
                            </a>



						</div>

                        <i class="fa fa-user"></i> <span><shiro:principal property="nickname"/></span>
						<img th:if="${session.loginUser!=null}" th:src='${session.loginUser.img}' class="img-circle"
                             height="40"/>

					</span>
                </div>

            </div>


        </div>
    </div>

    <script th:inline="javascript">
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';

        /*]]>*/

        function openFeiji() {
            layer
                .open({
                    type : 2,
                    area : [ '320px', '600px' ],
                    skin : 'layui-layer-rim', //加上边框
                    content : [
                        ctxPath+'static/game/weixinfeiji/index.html',
                        'no' ]
                });
        }
        function openWuziqi() {
            layer
                .confirm(
                    '您是需要双人对弈还是虐机！！！',
                    {
                        btn : [ '双人', '虐机', '取消' ]
                        //按钮
                    },
                    function() {
                        layer
                            .open({
                                type : 2,
                                area : [ '600px', '600px' ],
                                skin : 'layui-layer-rim', //加上边框
                                content : [
                                    ctxPath+'static/game/wuziqi/index_srdy.html',
                                    'no' ]
                            });
                    },
                    function() {
                        layer
                            .open({
                                type : 2,
                                area : [ '850px', '600px' ],
                                skin : 'layui-layer-rim', //加上边框
                                content : [
                                    ctxPath+'static/game/wuziqi/index.html',
                                    'no' ]
                            });
                    });

        }
        function openEluosifk() {
            layer
                .open({
                    type : 2,
                    area : [ '560px', '658px' ],
                    skin : 'layui-layer-rim', //加上边框
                    content : [
                        ctxPath+'static/game/eluosifangkuai/index.html',
                        'no' ]
                });
        }
        function openTaiqiu() {
            layer
                .open({
                    type : 2,
                    area : [ '810px', '600px' ],
                    skin : 'layui-layer-rim', //加上边框
                    content : [
                        ctxPath+'static/game/taiqiu/index.html',
                        'no' ]
                });
        }
        function zxtx() {
            layer.open({
                maxmin: true,
                closeBtn: 0,
                title: "聊天室",
                type: 2,
                shade: 0,
                area: ['700px', '530px'],
                content: [
                    ctxPath + 'chat',
                    'no']
            });
        }

        function resetPwd() {
            layer.prompt({title: '请输入原密码，并确认', formType: 0}, function (oldPass, index) {
                layer.close(index);
                layer.prompt({title: '请输入新密码，并确认', formType: 1}, function (newPass1, index) {
                    layer.close(index);
                    layer.prompt({title: '请再次输入新密码，并确认', formType: 1}, function (newPass2, index) {
                        layer.close(index);
                        if (newPass1 == newPass2) {
                            $.post(ctxPath + "user/resetPwd", {oldPass: oldPass, newPass: newPass1}, function (data) {
                                layer.alert(data);
                            })
                        } else {
                            layer.alert("两次密码不一致");
                        }
                    });
                });
            });
        }

        function resetNickName() {
            layer.prompt({title: '请输入新昵称', formType: 0}, function (nickname, index) {
                layer.close(index);
                $.post(ctxPath + "user/resetNickName", {nickname: nickname}, function (data) {
                    layer.alert(data);
                })


            });
        }

        function allMyInfo() {
            layer.open({
                type: 2,
                title: '我的信息',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '480px'],
                content: ctxPath + 'user/myself' //iframe的url
            });
        }

        function chooseImg() {
            layer.open({
                type: 2,
                title: '选择头像',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '640px'],
                content: ctxPath + 'user/chooseImg' //iframe的url
            });
        }

        function courseAddIndex() {
            layer.confirm('确定要创建索引吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.load(1);
                $.get(ctxPath + 'ES/addCourseIndex',function (data) {
                    layer.closeAll('loading');
                    layer.alert(data)
                })
            });

        }
        function courseDeleteIndex() {
            layer.confirm('确定要清除索引吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.load(1);
                $.get(ctxPath + 'ES/deleteCourseAll',function (data) {
                    layer.closeAll('loading');
                    layer.alert(data)
                })
            });
        }
        function noteBookAddIndex() {
            layer.confirm('确定要创建索引吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.load(1);
                $.get(ctxPath + 'ES/addNoteBookIndex',function (data) {
                    layer.closeAll('loading');
                    layer.alert(data)
                })
            });

        }
        function noteBookDeleteIndex() {
            layer.confirm('确定要清除索引吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.load(1);
                $.get(ctxPath + 'ES/deleteNoteBookAll',function (data) {
                    layer.closeAll('loading');
                    layer.alert(data)
                })
            });
        }

        //用与免登录模式下session注入
        var loginUser = [[${session.loginUser}]];
        if (loginUser == null) {
            location.href = ctxPath + "";
        }
        //提示
        $(function () {
            $("[data-toggle='tooltip']").tooltip();
        });

    </script>
</header>
<div class="container" layout:fragment="content"></div>
<footer class="footer">

    <div class="divT hide" onclick="ReturnTop();"><i class="fa fa-chevron-up"></i></div>

    <div class="container-fluid">
        <hr/>
        <div class="row footer-bottom">
            <ul class="list-inline text-center">
                <li><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></li>
                <li>京公网安备11010802014853</li>
            </ul>
        </div>
    </div>

    <script>
        window.onscroll = function () {
            var current = $(window).scrollTop();
            if (current > 180) {
                $(".divT").removeClass("hide");
            } else {
                $(".divT").addClass("hide");
            }
        };

        function ReturnTop() {
            $(window).scrollTop(0);
        }
    </script>
</footer>
</body>
</html>